<template>
    <div>
        <detail-banner v-bind:sightName="sightName" v-bind:bannerImg="bannerImg" v-bind:bannerImgs="gallaryImgs"></detail-banner>
        <detail-header></detail-header>
        <div class="content">
          <!--递归组件实现多级菜单-->
          <detail-list v-bind:list="list"></detail-list>
        </div>
    </div>
</template>

<script>
    import DetailBanner from './components/Banner'
    import DetailHeader from './components/Header'
    import DetailList from './components/List'
    import axios from 'axios'
    export default {
        name: "Detail",
        components: {
            DetailBanner,
            DetailHeader,
            DetailList
        },
        data () {
          return {
            sightName: '',
            bannerImg: '',
            gallaryImgs: [],
            list: []
          }
        },
      methods: {//定义这个发ajax请求的方法
        getDetailInfo () {
          // https://www.fastmock.site/mock/07ba8a7c2c8682ec1c96c7c1e789dcc0/api/web_site/city
          axios.get(process.env.API_HOST + '/web_site/detail', {
            //获取动态路由的参数
            params: {
              id: this.$route.params.id
            }
          }).then(this.handleGetDataSucc)
        },
        handleGetDataSucc (res) {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.sightName = data.sightName
            this.bannerImg = data.bannerImg
            this.gallaryImgs = data.gallaryImgs
            this.list = data.categoryList
          }
        }
      },
        mounted () {//发ajax请求
          this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
  .content{
    height 50rem;
  }
</style>
